<template>
  <div class="player-container">
    <el-row>
      <el-col :span="24">
        <el-button type="plain" icon="el-icon-plus" circle @click="dialogFormVisible = true" />
        <el-button type="plain" icon="el-icon-refresh" circle @click="list()" />
        <el-input v-model="search" placeholder="搜索ID" clearable autofocus prefix-icon="el-icon-search" style="margin-left:10px;width:150px" />
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :data="tables"
        height="750"
        stripe
        style="width: 100%"
      >
        <el-table-column
          fixed="left"
          label="操作"
          width="250"
        >
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(row)"/>
            <el-popconfirm
              title="确定删除吗？"
              @onConfirm="handleDel(row.id)"
            >
              <el-button slot="reference" type="danger" icon="el-icon-delete" circle />
            </el-popconfirm>
            <el-button icon="el-icon-search" circle @click="handleSearch(row)"/>
            <el-button icon="el-icon-video-play" circle @click="handleRecord(row)" style="margin-left: 0px;"/>
          </template>
        </el-table-column>
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="100"
        />
        <el-table-column
          prop="hostname"
          label="地址"
          width="250"
        />
      </el-table>
    </el-row>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="ID" :label-width="formLabelWidth" v-if="form.id != null">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.hostname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.secret" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddOrUpdate()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { ovinfoAll,add,del,update } from '@/api/openviduInfo'

export default {

  data() {
    return {
      search: null,
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        id: null,
        hostname: '',
        secret: '',
      }
    }
  },
  computed: {
    tables() {
      const search = this.search
      if (search) {
        return this.tableData.filter(data => {
          if (data.id.toString().indexOf(search) !== -1 || data.hostname.indexOf(search) !== -1) {
            return true
          }
        })
      }
      return this.tableData
    }
  },
  mounted() {
    this.search = this.$route.params.ovid
    this.list()
  },
  methods: {
    formatNum(row, column, cellValue) {
      return row.activeGroupNum + '/' + row.sumGroupNum
    },
    formatBoolean(row, column, cellValue) {
      let ret = ''
      if (cellValue) {
        ret = '是'
      } else {
        ret = '否'
      }
      return ret
    },
    list() {
      return new Promise((resolve, reject) => {
        ovinfoAll({}).then(response => {
          const { success, data, message } = response
          if (success) {
            this.tableData = data
          }
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    handleAddOrUpdate() {
      // console.log(this.form.id);
      // console.log(this.form.hostname);
      // console.log(this.form.secret);
      if (this.form.id == null) {
        new Promise((resolve, reject) => {
          add({"hostname":this.form.hostname,"secret":this.form.secret}).then(response => {
            const { success, data, message } = response
            if (success) {
              this.$message(message);
              this.dialogFormVisible=false;
              this.list();
            }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      } else {
        new Promise((resolve, reject) => {
          update({"id":this.form.id,"hostname":this.form.hostname,"secret":this.form.secret}).then(response => {
            const { success, data, message } = response
            if (success) {
              this.$message(message);
              this.dialogFormVisible=false;
              this.list();
            }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      }
      this.form.id = null;
      this.form.hostname = '';
      this.form.secret = '';
    },
    handleEdit(row) {
      console.log(row);
      this.form.id=row.id;
      this.form.hostname=row.hostname;
      this.dialogFormVisible = true;
    },
    handleDel(id) {
      console.log(id);
      new Promise((resolve, reject) => {
        del({"id":id}).then(response => {
          const { success, data, message } = response
          if (success) {
            this.$message(message);
            this.list();
          }
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    handleSearch(row) {
      this.$router.push({ name: 'server', params: { hostname: row.hostname }})
    },
    handleRecord(row) {
      this.$router.push({ name: 'record', params: { hostname: row.hostname }})
    }
  }
}
</script>

<style type="scss">
  .player-container{
    margin: 30px;
  }
</style>

